<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layouts/layout">
<head>
<title>Home</title>
</head>
<body>

	<th:block layout:fragment="content">
		<div class="container-wrapper">
    <div class="container">
        <div class="page-header">
            <h1>Product Inventory Page</h1>


            <p class="lead">This is the product inventory page:</p>

        <table class="table-striped table-hover " id="data_table">
            <thead>
            <tr class="bg-success">
                
                <th>Product Name</th>
                <th>Category</th>
                <th>Condition</th>
                <th>Price</th>
                <th></th>
            </tr>
            </thead>
            	
                <tr th:each="prod : ${products}">
                  
                    <td th:text="${prod.productName}">${product.productName}</td>
                    <td th:text="${prod.productcategory}">${product.productCategory}</td>
                    <td th:text="${prod.productcondition}">${product.productCondition}</td>
                    <td th:text="${prod.productprice}"> ${product.productPrice} USD </td>
                    <td>
                        <a th:href="@{|/product/viewProduct/${prod.id}|}"><span class="glyphicon glyphicon-info-sign"></span></a>
                        <a th:href="@{|/admin/product/deleteProduct/${prod.id}|}" ><span class="glyphicon glyphicon-remove"></span></a>
                        <a th:href="@{|/admin/product/editProduct/${prod.id}|}" ><span class="glyphicon glyphicon-pencil"></span></a>
                    </td>
                </tr>
           
        </table>

        <a th:href="@{/admin/product/addProduct}" class="btn btn-primary">Add Product</a>
        </div>
        </div>
		</div>
	</th:block>
	
	
	

	<th:block layout:fragment="javascripts">

		<script>
		    $(document).ready(function(){
		
		        $('#data_table').DataTable({
		            "lengthMenu": [[1,2,3,5,10, -1], [1,2,3,5,10, "All"]]
		        });
		    });
		</script>

	</th:block>

</body>
</html>